/*
 * @Date: 2022-03-29 13:01:06
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-04-11 10:01:57
 * @FilePath: /payment/pay/src/pages/PayGroundTest/PayGroundTest.jsx
 */
import React, { useState, useEffect } from "react";
import zhCN from "antd/es/locale/zh_CN";
import {
  Row,
  Col,
  Button,
  Table,
  ConfigProvider,
  Select,
  DatePicker,
  Space,
  Input,
  Checkbox,
  Form,
} from "antd";
import Tab from "../../components/Tabs";
import "./PayGroundTest.css";
import { SearchOutlined, CloudUploadOutlined } from "@ant-design/icons";

export default function PayGroundTest() {
  const { Option } = Select;
  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };
  const validateMessages = {
    required: "${label} is required!",
    types: {
      email: "${label} is not a valid email!",
      number: "${label} is not a valid number!",
    },
    number: {
      range: "${label} must be between ${min} and ${max}",
    },
  };
  const onFinish = () => {};
  return (
    <div>
      <Tab title={"代付测试"}></Tab>
      <Form
        className="Payform"
        {...layout}
        name="nest-messages"
        onFinish={onFinish}
        validateMessages={validateMessages}
      >
        <Form.Item
          labelCol={{ span: 3 }}
          wrapperCol={{ span: 20 }}
          name={["user", "name"]}
          label="接口地址"
          rules={[{ required: true }]}
        >
          <Input size="large" />
        </Form.Item>
        <Form.Item
          labelCol={{ span: 3 }}
          wrapperCol={{ span: 20 }}
          name={["user", "email"]}
          label="回调地址"
          rules={[{ type: "email" }]}
        >
          <Input size="large" />
        </Form.Item>
        <Form.Item
          name="gender"
          label="加密方式"
          labelCol={{ span: 3 }}
          wrapperCol={{ span: 20 }}
        >
          <Select defaultValue={"MD5"} allowClear size="large">
            <Option value="MD5">MD5</Option>
          </Select>
        </Form.Item>
        <Form.Item
          name="gender"
          label="商户"
          labelCol={{ span: 3 }}
          wrapperCol={{ span: 20 }}
        >
          <Select defaultValue={"test"} allowClear size="large">
            <Option value="test">test</Option>
          </Select>
        </Form.Item>
        <Form.Item
          name="gender"
          label="代付通道"
          labelCol={{ span: 3 }}
          wrapperCol={{ span: 20 }}
        >
          <Select defaultValue={"MD5"} allowClear size="large">
            <Option value="MD5">手动银行卡</Option>
          </Select>
        </Form.Item>
        <Form.Item
          labelCol={{ span: 3 }}
          wrapperCol={{ span: 20 }}
          name={["user", "email"]}
          label="代付金额"
          rules={[{ type: "email" }]}
        >
          <Input size="large" placeholder="请输入代付金额" />
        </Form.Item>
        <Form.Item
          labelCol={{ span: 3 }}
          wrapperCol={{ span: 20 }}
          name={["user", "email"]}
          label="商户订单号"
          rules={[{ type: "email" }]}
        >
          <Input size="large" placeholder="请输入代付订单号" />
        </Form.Item>
        <Form.Item
          labelCol={{ span: 3 }}
          wrapperCol={{ span: 20 }}
          name={["user", "email"]}
          label="银行卡名称"
          rules={[{ type: "email" }]}
        >
          <Input size="large" placeholder="请输入银行名称" />
        </Form.Item>
        <Form.Item
          labelCol={{ span: 3 }}
          wrapperCol={{ span: 20 }}
          name={["user", "email"]}
          label="银行卡号"
          rules={[{ type: "email" }]}
        >
          <Input size="large" placeholder="请输入银行卡号" />
        </Form.Item>
        <Form.Item
          labelCol={{ span: 3 }}
          wrapperCol={{ span: 20 }}
          name={["user", "email"]}
          label="持卡人姓名"
          rules={[{ type: "email" }]}
        >
          <Input size="large" placeholder="请输入持卡人姓名" />
        </Form.Item>
        <Form.Item
          labelCol={{ span: 3 }}
          wrapperCol={{ span: 20 }}
          name={["user", "email"]}
          label="商户备注"
          rules={[{ type: "email" }]}
        >
          <Input size="large" placeholder="请输入商户备注" />
        </Form.Item>
        <Form.Item className="Paybtn" wrapperCol={{ span: 24 }}>
          <Button
            type="primary"
            htmlType="submit"
            size="large"
            className="Paybtn-btn"
          >
            提交
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}
